<template>
  <el-button type="primary" size="small" @click="dialogVisible = true"
    >登录 / 注册</el-button
  >
  <!-- close-on-click-modal 默认true 是否可以通过点击 modal 关闭 Dialog -->
  <!-- :lock-scroll  默认true 是否在 Dialog 出现时将 body 滚动锁定 -->
  <el-dialog
    :title="activeName == 'first' ? '登录' : '注册'"
    v-model="dialogVisible"
    width="34%"
    :lock-scroll="false"
    @close="closeDialgo"
  >
    <el-tabs v-model="activeName" stretch>
      <!-- 登录 -->
      <el-tab-pane label="登录" name="first">
        <div style="padding: 20px 0"></div>
        <el-form
          label-position="right"
          label-width="80px"
          :model="loginForm"
          :rules="loginRules"
          ref="loginFormRef"
        >
          <el-form-item label="用户名" prop="username">
            <el-input
              v-model="loginForm.username"
              placeholder="用户名"
              clearable
            ></el-input>
          </el-form-item>
          <div style="padding: 10px 0"></div>
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model="loginForm.password"
              placeholder="密码"
              show-password
              clearable
            ></el-input>
          </el-form-item>
          <div style="padding: 10px 0"></div>
          <el-form-item>
            <el-button type="primary" style="width: 85%" @click="loginSubmit"
              >登 录</el-button
            >
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!-- 登录end -->

      <!-- 注册 -->
      <el-tab-pane label="注册" name="second">
        <div style="padding: 20px 0"></div>
        <el-form
          label-position="right"
          label-width="80px"
          :model="regForm"
          :rules="regRules"
          ref="regFormRef"
        >
          <el-form-item label="用户名" prop="username">
            <el-input
              v-model="regForm.username"
              placeholder="用户名"
              clearable
            ></el-input>
          </el-form-item>
          <div style="padding: 10px 0"></div>
          <el-form-item label="密码" prop="password" :show-password="true">
            <el-input
              type="password"
              v-model="regForm.password"
              placeholder="密码"
              show-password
              clearable
            ></el-input>
          </el-form-item>
          <div style="padding: 10px 0"></div>
          <el-form-item label="确认密码" prop="password2">
            <el-input
              type="password"
              v-model="regForm.password2"
              placeholder="确认密码"
              show-password
              clearable
            ></el-input>
          </el-form-item>
          <div style="padding: 10px 0"></div>
          <el-form-item>
            <el-button type="primary" style="width: 85%" @click="regSubmit"
              >注 册</el-button
            >
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <span class="dialog-footer"> </span>
    </template>
  </el-dialog>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  name: "LoginRegister",
  data() {
    return {
      dialogVisible: false,
      activeName: "first",

      // 登录
      loginForm: {
        username: "admin",
        password: "9999",
      },
      loginRules: {
        //form表单里rules属性绑定的对象，用来对表单内控件做格式校验
        username: [
          { required: true, message: "请输入用户名" },
          {
            validator(rule, value, callback) {
              //长度
              if (value.length < 2 || value.length > 8) {
                callback(new Error("请输入2-8位字符"));
              } else {
                //字符验证
                if (/^[a-zA-Z0-9_\u4e00-\u9fa5]+$/.test(value)) {
                  callback(); //验证成功
                } else {
                  callback(new Error("只允许汉字、字母、下划线"));
                }
              }
            },
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码" },
          // {
          //   validator(rule, value, callback) {
          //     //长度
          //     if (value.length < 6 || value.length > 18) {
          //       callback(new Error("请输入6-18位字符"));
          //     } else {
          //       //字符验证
          //       if (/^[a-zA-Z]\w{5,17}$/.test(value)) {
          //         callback(); //验证成功
          //       } else {
          //         callback(new Error("以字母开头,只能包含字符、数字和下划线"));
          //       }
          //     }
          //   },
          // },
        ],
      },

      //  注册
      regForm: {
        //注册表单内控件绑定的数据
        username: "",
        password: "9999",
        password2: "9999",
      },
      regRules: {
        //form表单里rules属性绑定的对象，用来对表单内控件做格式校验
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            validator(rule, value, callback) {
              //长度
              if (value.length < 2 || value.length > 8) {
                callback(new Error("请输入2-8位字符"));
              } else {
                //字符验证
                if (/^[a-zA-Z0-9_\u4e00-\u9fa5]+$/.test(value)) {
                  callback(); //验证成功
                } else {
                  callback(new Error("只允许汉字、字母、下划线"));
                }
              }
            },
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          // {
          //   validator(rule, value, callback) {
          //     //长度
          //     if (value.length < 6 || value.length > 18) {
          //       callback(new Error("请输入6-18位字符"));
          //     } else {
          //       //字符验证
          //       if (/^[a-zA-Z]\w{5,17}$/.test(value)) {
          //         callback(); //验证成功
          //       } else {
          //         callback(new Error("以字母开头,只能包含字符、数字和下划线"));
          //       }
          //     }
          //   },
          // },
        ],
        password2: [
          { required: true, message: "请确认密码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (this.regForm.password === value) {
                callback(); //密码一致
              } else {
                callback(new Error("两次密码不一致"));
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {},
  computed: {},
  methods: {
    ...mapMutations(["updateUser"]),
    // 关闭对话框
    closeDialgo() {
      this.$refs.regFormRef.resetFields();
      this.$refs.loginFormRef.resetFields();
    },
    // 注册
    regSubmit() {
      //注册的提交按钮  发起请求到后端
      this.$refs.regFormRef.validate(async (bool) => {
        if (bool) {
          //表单数据校验成功
          let { data } = await this.$axios({
            method: "POST",
            url: "/reg",
            data: {
              username: this.regForm.username,
              password: this.regForm.password,
            },
          });
          if (data.code == 0) {
            //注册成功
            this.$refs.regFormRef.resetFields();
            this.$message.success(data.message + " 跳转至登录页");
            this.activeName = "first";
          } else {
            this.$message.error(data.message);
          }

          //注册失败
        } else {
          return false;
        }
      });
    },
    // 登录
    loginSubmit() {
      //注册的提交按钮  发起请求到后端
      this.$refs.loginFormRef.validate(async (bool) => {
        if (bool) {
          //表单数据校验成功
          let { data } = await this.$axios({
            method: "POST",
            url: "/login",
            data: {
              username: this.loginForm.username,
              password: this.loginForm.password,
            },
          });
          if (data.code == 0) {
            //登录成功
            this.$refs.loginFormRef.resetFields();
            this.$message.success(data.message);
            this.dialogVisible = false;
            this.updateUser(data.data);
          } else {
            this.$message.error(data.message);
          }
          //注册失败
        } else {
          return false;
        }
      });
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
</style>